<!DOCTYPE html id="app" >
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <style>
    #app{
            background-color: rgb(178, 168, 168);
    } 
    .box2{
        /* width: 400px;
        height: 100px; */
        background-color: rgb(49, 43, 225);
    } 
    .box{
        background-color: rgb(151, 88, 88);
    }
    </style>
</head>
<body >
   
    <div  >
        <div class="box">fadsfasdf</div>
        <button   @click="changeClass">添加类</button>
        
    </div>

    <script>
        var app=new Vue({
            el:'#app',
            data:{
                isActive:true
            },
            methods:{
                changeClass:function(){
                    this.isActive=!this.isActive;
                }

            }
        })
    </script>

   
</body>
</html>
